<template>
  <div class="my-swipe">
    <van-swipe
      ref="vanSwipe"
      v-if="showVanSwipeFlag"
      :vertical="isVertical"
      :autoplay="3000"
      :show-indicators="false"
      :width="clientWidth"
      :height="clientHeight"
    >
      <van-swipe-item  v-for="(item, index) of elements" :key="index">
        <img :src="item.url" :alt="item.name" :title="item.name" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant'
export default {
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      showVanSwipeFlag: false, // 展示轮播组件
      clientWidth: 0, // 页面宽度
      clientHeight: 0 // 页面高度
    }
  },
  computed: {
    elements () {
      return this.data.elements || []
    },
    isVertical () {
      return this.data.direction !== 'horizontal'
    },
    width () {
      return this.elements[0] ? Number(this.elements[0].width) || 375 : 375
    },
    height () {
      return this.elements[0] ? Number(this.elements[0].height) || 140 : 140
    },
    radio () {
      const radio = this.height / this.width
      return radio
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.clientWidth = this.$el.getBoundingClientRect().width
      this.clientHeight = this.radio * this.clientWidth
      this.$el.style.setProperty('--height', `${this.clientHeight}px`)
      // this.$refs.vanSwipe.resize()
      this.showVanSwipeFlag = true
    })
  }
}
</script>

<style lang="less" scoped>
.my-swipe {
  --height: 140px;
  width: 100%;
  height: var(--height);
  box-sizing: border-box;
  overflow: hidden;
  background-color: #fff;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>